<template>
  <div class="xj-shop-goods">
    <van-nav-bar title="我的商品" left-arrow @click-left="back()" />
    <!-- content -->
    <div class="tab-content">
      <ul>
        <li v-for="(item, index) in collectionList" :key="index" @click="handlerToEdit(item)">
          <div class="goods-name">
            <div class="left-photo">
              <!-- <img v-lazy="publicUrl + item.filepath" width="100%" height="100%" /> -->
              <van-image
                width="100%"
                height="100%"
                lazy-load
                :src="publicUrl + item.filepath"
              />
            </div>
            <div class="right-name">
              <div style="padding-right: 50px;">{{item.title}}</div>
              <div>
                ¥ {{item.price}}
                <del class="be-price">¥{{item.old_price}}</del>
              </div>
            </div>
            <span class="hc-status" v-if="item.status === 0">
              在售
            </span>
            <span class="hc-status hc-stop" v-if="item.status === 2">
              下架
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  postgetGoodsList
} from "../../api/ajax";
export default {
  data: function() {
    return {
      collectionList: []
    };
  },

  mounted() {
    this.postgetGoodsList();
  },
  methods: {
    async postgetGoodsList() {
      const result = await postgetGoodsList();
      if (!!result) {
        this.collectionList = result;
      }
    },
    handlerToEdit({ id }) {
        this.jump('addgoods', { type: 'edit', id })
    }
  }
};
</script>

<style lang="scss" scoped>
.xj-shop-goods {
  height: 100%;
  width: 100%;
  background-color: #f4f4f4;
  position: fixed;
  overflow: scroll;
  .tab-content {
    li {
      width: 95%;
      background-color: #fff;
      margin: 0 auto;
      margin-top: px2rem(15);
      border-radius: px2rem(15);
      .goods-name {
        display: flex;
        height: px2rem(110);
        border-bottom: px2rem(1) #f4f4f4 solid;
        position: relative;
        .left-photo {
          width: px2rem(89);
          height: px2rem(89);
          border-radius: px2rem(10);
          // background-color: #272822;
          margin-top: px2rem(11);
          margin-left: px2rem(11);
          img {
            width: 100%;
            height: 100%;
          }
        }
        .hc-status {
          position: absolute;
          right: 15px;
          top: 10px;
          color: #fff;
          padding: 1px 8px;
          border-radius: 4px;
          background-color: #80c342;
          font-size: 14px;
          &.hc-stop {
            background-color: #e94242;
          }
          &.hc-active {
            background-color: #80c342;
          }
        }
        .right-name {
          font-size: px2rem(14);
          font-weight: bold;
          padding-left: px2rem(10);
          padding-top: px2rem(10);
          width: 64%;
          position: relative;
          div:nth-child(2) {
            position: absolute;
            bottom: px2rem(4);
            right: px2rem(2);
            // float: left;
          }
          div:last-child {
            font-size: px2rem(16);
            color: #f79846;
            position: absolute;
            left: px2rem(10);
            bottom: px2rem(10);
            .be-price {
              font-size: px2rem(12);
              font-weight: normal;
              color: #b9b9b9;
            }
          }
        }
      }
      .store-name {
        // overflow: hidden;
        // display: flex;
        height: px2rem(55);
        // background-color: #aaa;
        padding-top: px2rem(11);
        padding-left: px2rem(11);
        .store-head {
          float: left;
          // width: 10%;
          div {
            margin-top: px2rem(12);
            margin-right: px2rem(10);
            //  margin: 0 auto;
            width: px2rem(25);
            height: px2rem(25);
            overflow: hidden;
            border-radius: 50%;
          }
        }
        .shop-name {
          float: left;
          width: 59%;
          color: #a3a3a3;
          padding-top: px2rem(2);
          padding-left: px2rem(3);
          font-size: px2rem(14);
          margin-top: px2rem(14);
          div {
            margin-bottom: px2rem(5);
          }
          span {
            margin-top: px2rem(5);
            font-size: px2rem(12);
            border: px2rem(1) #7d7d7d solid;
            padding-left: px2rem(2);
            padding-right: px2rem(2);
          }
        }
        .store-go {
          margin-top: px2rem(12);
          float: right;
          color: #a3a3a3;
          padding-top: px2rem(3);
          padding-right: px2rem(10);
        }
      }
    }
  }
}
</style>

